<template>
	<view class="page-dynamic">
        <!-- banner -->
		<swiper class="banner-swiper" :circular="true" :vertical="false">
			<swiper-item class="uni-flex" v-for="(data,index) in bannerDataList" :key="index">
				<image lazy-load class="uni-flex-item" mode="aspectFill"  :src="data.imgUrl + '?x-oss-process=image/resize,h_528/auto-orient,1'"></image>
			</swiper-item>
		</swiper>
        <!-- 链接 -->
		<!--<uni-grid class="st-margin-top-30-px" :column="4" :highlight="true" :showBorder="false">
			<uni-grid-item>
                <view  class="st-flex-direction-c  st-flex-center-all">
                    <view class="grid-icon-box activity-bg st-flex-center-all">
                        <text class="iconfont icon-huodong st-font-size-lg activity-icon"></text>
                    </view>

                    <text class="st-font-size-sm">线下活动</text>
                </view>
			</uni-grid-item>
            <uni-grid-item>
                <view  class="st-flex-direction-c  st-flex-center-all">
                    <view class="grid-icon-box zufang-bg st-flex-center-all">
                        <text class="st-font-size-esm zufang-icon">租房直通车</text>
                    </view>

                    <text class="st-font-size-sm">敬请期待</text>
                </view>
            </uni-grid-item>
		</uni-grid>-->

        <!-- 动态 -->
        <view>
            <template v-for="moment in momentDataList">
                <StUniMoment @avatar="goDetail(moment)" :moment-data="moment">
                    <StUniComment comment-style="top:-50upx;" star-style="top:-50upx;" is-stared :star-nicknames="['sss','札林','札林','札林','札林']" :comments="[{nickname: 'ss',content: 'sssss'}]"></StUniComment>
                </StUniMoment>
            </template>

        </view>
	</view>
</template>

<script>
    import StUniMoment from '@/components/StUniMoment'
    import StUniComment from '@/components/StUniComment'
	export default {
        components: {StUniMoment,StUniComment},
		data() {
			return {
                bannerDataList: [],
                momentDataList: [],
                momentQuery: {
                    current: 1,
                }
			}
		},
		onLoad() {
		    this.loadBanner()
		    this.loadMoment()
		},
        onTabItemTap (e) {
            uni.setStorageSync('tabItemIndex',e.index)
        },
        onPullDownRefresh() { //监听下拉刷新动作
            this.momentQuery.current = 1
            this.loadMoment()
        },
        onReachBottom(){
            this.loadMoment()
        },
		methods: {

            loadBanner() {
                this.$http.get('/banner/getList',{params: {groupFlag: 'wwd_dynamic'}})
					.then(res => {
                        this.bannerDataList = res.data
					})
            },
            loadMoment() {
                this.$http.get('/moment/getPage',{params:this.momentQuery})
                    .then(res => {
                        if (this.momentQuery.current == 1) {
                            this.momentDataList = []
                        }
                        res.data.records.forEach(item =>{
                            this.momentDataList.push({
                                avatar: item.ownerUserAvatar,
                                ownerUserId: item.ownerUserId,
                                content: item.content,
                                nickname: item.ownerUserNickname,
                                images: item.momentPics || [],
                                timeAt: item.timeAt,
                            })
                        });
                        this.momentQuery.current = res.data.current + 1
                        uni.stopPullDownRefresh();
                    })
            },
            goDetail(data) {
                uni.navigateTo({
                    url: '/pages/detail/detail?userId=' + data.ownerUserId
                })
            }
		}
	}
</script>

<style>
	.page-dynamic .banner-swiper{
		height: 200px;
	}
    .page-dynamic .grid-icon-box {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .page-dynamic .activity-bg{
        background-color: #FFC26E;
    }

    .page-dynamic .activity-icon:before{
        color: #FEF7DE;
    }
    .page-dynamic .zufang-bg{
        background-color: gainsboro;
    }
    .page-dynamic .zufang-icon{
        color: #fff;
        text-align: center;
        padding: 2px 7px;
    }
    .page-dynamic .moment-star,.moment-comment{
        top: 120px;
    }
</style>
